import { Component, Prop, Vue, Emit, Watch } from 'vue-property-decorator'
import styles from '../NewApply/ApplyDetail.less'
import style from './SealDetail.less'
import DetailItem from '@/components/DetailItem'

const formLabelWidth3: string = '48px'
const formLabelWidth4: string = '60px'
const formLabelWidth6: string = '96px'

const detailData: any = [
  {
    key: 'eSealBasicInfo',
    title: '电子印章基本信息',
    single: true,
    child: [
      {
        key: 'sealCode',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '印章编码',
        content: '',
      },
      {
        key: 'sealName',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '电子印章名称',
        content: '',
      },
      {
        key: 'sealUseType',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '用章方式',
        content: '',
        tips:
          '选择Ukey签章需要硬件介质UKey盖章，选择云签章可用于开放服务使用API调用。',
      },
      {
        key: 'sealType',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '电子印章类别',
        content: '',
        tips:
          '组织机构的电子法定名称章需要上级主管部门审批，其他专用章（包括经济合同章、财务专用章等）。在名称式样上应与单位正式印章有所区别，经本单位领导批准后可以申请。',
      },
      {
        key: 'startTime',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '电子印章启用时间',
        content: '',
      },
      {
        key: 'endTime',
        colLength: 16,
        labelWidth: formLabelWidth6,
        label: '电子印章终止时间',
        content: '',
      },
    ],
  },
  {
    key: 'sealOrgBasicInfo',
    title: '用章机构基本信息',
    child: [
      {
        key: 'organizeName',
        label: '机构名称',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        key: 'organizeType',
        label: '机构类型',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        key: 'organizeCardType',
        label: '证照类型',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        key: 'organizeCardId',
        label: '证照号码',
        labelWidth: formLabelWidth3,
        content: '',
      },
      // { key: "organizeLevel", label: "行政等级", labelWidth: formLabelWidth3, content: "" }
    ],
  },
  {
    key: 'sealUserBasicInfo',
    title: '监印员基本信息',
    child: [
      {
        key: 'inspectName',
        label: '监印员姓名',
        labelWidth: formLabelWidth4,
        content: '',
      },
      // { key: "", label: "监印员岗位", content: "" },
      {
        key: 'inspectMobileDes',
        label: '手机号码',
        labelWidth: formLabelWidth3,
        content: '',
      },
      {
        key: 'inspectCardType',
        label: '证件类型',
        labelWidth: formLabelWidth4,
        content: '',
      },
      {
        key: 'inspectCardIdDes',
        label: '证件号码',
        labelWidth: formLabelWidth3,
        content: '',
      },
    ],
  },
  {
    key: 'digitalCertBasicInfo',
    title: '数字证书基本信息',
    single: true,
    child: [
      {
        key: 'certSn',
        label: '证书序列号',
        labelWidth: formLabelWidth4,
        colLength: 22,
        content: '',
      },
      {
        key: 'certName',
        label: '证书名称',
        labelWidth: formLabelWidth4,
        colLength: 22,
        content: '',
      },
      {
        key: 'certGive',
        label: '证书颁发者',
        labelWidth: formLabelWidth4,
        colLength: 22,
        content: '',
      },
      {
        key: 'certTime',
        label: '证书有效期',
        labelWidth: formLabelWidth4,
        colLength: 22,
        content: '',
      },
    ],
  },
  {
    key: 'sealAdminBasicInfo',
    title: '印章管理员基本信息',
    child: [],
    useSlot: true,
  },
]

@Component({})
export default class SealDetail extends Vue {
  @Prop({ default: '详情' }) private title!: string
  @Prop({}) private data!: any
  @Prop({ default: false }) private visible!: boolean
  @Prop({
    default() {
      return {
        eSealBasicInfo: true,
        sealOrgBasicInfo: true,
        sealUserBasicInfo: true,
        digitalCertBasicInfo: true,
        sealAdminBasicInfo: false,
      }
    },
  })
  private detailItems!: any // 用于控制详情页各子项目是否展示
  private sealUrl = ''
  private detailData = []

  protected render(h: any) {
    return (
      <div class={styles.sealDetail}>
        <el-dialog
          title={this.title}
          custom-class="custom-dialog"
          width={'700px'}
          close-on-click-modal={false}
          close-on-press-escape={false}
          visible={this.visible}
          {...{
            on: { 'update:visible': this.visibleChange },
          }}
        >
          <el-form hide-required-asterisk class={styles.sealForm}>
            {this.detailData &&
              this.detailData.map((item: any, index: number) => {
                return (
                  this.detailItems[item.key] && (
                    <DetailItem
                      class={styles.detailItem}
                      key={index}
                      single={item.single}
                      data={item.child}
                      title={item.title}
                      useSlot={item.useSlot}
                    >
                      {item.useSlot && this.$slots[item.key]}
                    </DetailItem>
                  )
                )
              })}
            <div
              class={style.seal}
              style={{
                background: `url(${this.sealUrl}) center center / 127px no-repeat`,
              }}
            >
              {/* <img src={this.sealUrl} /> */}
            </div>
          </el-form>
          <div slot="footer">
            <el-button
              onClick={() => {
                this.$emit('visibleChange', false)
              }}
            >
              关闭
            </el-button>
          </div>
        </el-dialog>
      </div>
    )
  }

  @Emit('visibleChange')
  private visibleChange(val: boolean) {
    return val
  }

  @Watch('visible')
  private visibleHandler(val: boolean) {
    if (val && this.data) {
      detailData.forEach((detail: any) => {
        detail.child.forEach((item: any) => {
          item.content = this.data[item.key]
        })
      })
      this.detailData = detailData
      this.sealUrl = this.data.sealPicUrl
    }
  }
}
